/* ==================
          布局
 ==================== */
/* -- 定位 -- */
.por,
.p-r {
  position: relative;
}

.poa,
.p-a {
  position: absolute;
}

.pof,
.p-f {
  position: fixed;
}

.tlc {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.tpc {
  top: 50%;
  transform: translateY(-50%);
}

.lfc {
  left: 50%;
  transform: translateX(-50%);
}

.tp-0,
.t0 {
  top: 0;
}

.lf-0,
.l0 {
  left: 0;
}

.rt-0,
.r0 {
  right: 0;
}

.bt-0,
.b0 {
  bottom: 0;
}

/* -- 显示隐藏 -- */
.dn,
.d-n {
  display: none;
}

.bdn,
.b-n,
.bn {
  border: none;
}

.vish,
.v-h {
  visibility: hidden;
}

.w-0,
.w0 {
  width: 0;
}

.h-0,
.h0 {
  height: 0;
}

.op-0,
.op0 {
  opacity: 0;
}

.oh,
.o-h {
  overflow: hidden;
}

/* -- 继承 -- */
.w-100p,
.w100p {
  width: 100%;
}

.h-100p,
.h100p {
  height: 100%;
}

.wh-100p,
.wh100p {
  width: 100%;
  height: 100%;
}

.wih,
.w-ih {
  width: inherit;
}

.hih,
.h-ih {
  height: inherit;
}

.whih,
.wh-ih {
  width: inherit;
  height: inherit;
}


/*  -- 圆角 -- */
.bdr(@radiu) {
  border-radius: @radiu;
}

.bdr {

  &-0,
  &0 {
    .bdr(0)
  }

  &-5p,
  &5p {
    .bdr(50%)
  }

  &-5,
  &5 {
    .bdr(5px)
  }

  &-10,
  &10 {
    .bdr(10px)
  }

  &-20,
  &20 {
    .bdr(20px)
  }

  &-30,
  &30 {
    .bdr(30px)
  }
}


/*  -- 块级 -- */
.m0a,
.m-0a {
  margin: 0 auto;
}

.ma,
.m-a {
  margin: auto;
}

.db,
.d-b {
  display: block;
}

.di,
.d-i {
  display: inline;
}

.dib,
.d-i-b {
  display: inline-block;
}

.dif,
.d-i-f {
  display: inline-flex;
}

/*  -- flex弹性布局 -- */
.df,
.flex,
.d-f {
  display: flex;
}

.flex1,
.fx1,
.f-1 {
  flex: 1;
}

.flex2,
.fx2,
.f-2 {
  flex: 2;
}

.flex3,
.fx2,
.f-2 {
  flex: 3;
}

.fldc,
.fxdc,
.f-d-c,
.fdc,
.flc {
  flex-direction: column;
}

.flw,
.fxww,
.f-w-w,
.fww,
.flww {
  flex-wrap: wrap;
}

.align-start,
.aifs,
.a-i-f-s {
  align-items: flex-start;
}

.align-end,
.aife,
.a-i-f-e {
  align-items: flex-end;
}

.align-center,
.aic,
.a-i-c {
  align-items: center;
}

.align-stretch,
.aisc,
.a-i-s {
  align-items: stretch;
}

.self-start,
.asfs,
.a-s-f-s {
  align-self: flex-start;
}

.self-center,
.asfc,
.a-s-f-c {
  align-self: flex-center;
}

.self-end,
.asfe,
.a-s-f-e {
  align-self: flex-end;
}

.self-stretch,
.assc,
.a-s-s {
  align-self: stretch;
}

.align-stretch,
.aisc,
.a-i-s {
  align-items: stretch;
}

.justify-start,
.jcfs,
.j-c-f-s {
  justify-content: flex-start;
}

.justify-end,
.jcfe,
.j-c-f-e {
  justify-content: flex-end;
}

.justify-center,
.jcc,
.j-c-c {
  justify-content: center;
}

.justify-between,
.jcsb,
.j-c-s-b {
  justify-content: space-between;
}

.justify-around,
.jcsa,
.j-c-s-a {
  justify-content: space-around;
}

.justify-evenly,
.jcspe,
.j-c-s-e {
  justify-content: space-evenly;
}

/*  -- 内外边距 -- */
.m(@c) {
  margin: 1px*(@c);
}

.mt(@c) {
  margin-top: 1px*(@c);
}

.mr(@c) {
  margin-right: 1px*(@c);
}

.mb(@c) {
  margin-bottom: 1px*(@c);
}

.ml(@c) {
  margin-left: 1px*(@c);
}

.p(@c) {
  padding: 1px*(@c);
}

.pt(@c) {
  padding-top: 1px*(@c);
}

.pr(@c) {
  padding-right: 1px*(@c);
}

.pb(@c) {
  padding-bottom: 1px*(@c);
}

.pl(@c) {
  padding-left: 1px*(@c);
}

// 由大到小递归，直到不大于-10结束
.loopm(@c) when (@c > -10) {
  .loopm((@c - 10));

  // 字符串拼接@{c}，这里可以定制你的个人类名

  .m-@{c} {
    .m(@c);
  }

  .mt-@{c} {
    .mt(@c);
  }

  .mr-@{c} {
    .mr(@c);
  }

  .mb-@{c} {
    .mb(@c);
  }

  .ml-@{c} {
    .ml(@c);
  }

  .mlr-@{c} {
    .ml(@c);
    .mr(@c);
  }

  .mtb-@{c} {
    .mt(@c);
    .mb(@c);
  }

  .p-@{c} {
    .p(@c);
  }

  .pt-@{c} {
    .pt(@c);
  }

  .pr-@{c} {
    .pr(@c);
  }

  .pb-@{c} {
    .pb(@c);
  }

  .pl-@{c} {
    .pl(@c);
  }

  .plr-@{c} {
    .pl(@c);
    .pr(@c);
  }

  .ptb-@{c} {
    .pt(@c);
    .pb(@c);
  }
}

// 执行函数
.loopm(15);

.loopm(60);

.bdb,
.bxsb,
.b-d-b,
.b-s-b-d-b,
.border-box {
  box-sizing: border-box;
}

/* -- 浮动 --  */
.cf::after,
.cf::before,
.clearfix::after,
.clearfix::before {
  content: " ";
  display: table;
}

.cf::after,
.clearfix::after {
  clear: both;
}

.fl,
.f-l {
  float: left;
}

.fr,
.f-r {
  float: right;
}

/* ==================
            边框
   ==================== */
/* -- 实线 -- */
.solid,
.solid-top,
.solid-right,
.solid-bottom,
.solid-left,
.dashed,
.dashed-top,
.dashed-right,
.dashed-bottom,
.dashed-left {
  position: relative;
}

.solid::after,
.solid-top::after,
.solid-right::after,
.solid-bottom::after,
.solid-left::after,
.dashed::after,
.dashed-top::after,
.dashed-right::after,
.dashed-bottom::after,
.dashed-left::after {
  content: " ";
  width: 200%;
  height: 200%;
  position: absolute;
  top: 0;
  left: 0;
  border-radius: inherit;
  transform: scale(0.5);
  transform-origin: 0 0;
  pointer-events: none;
  box-sizing: border-box;
}

.solid::after {
  border: 1px solid rgba(0, 0, 0, 0.1);
}

.solid-top::after {
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.solid-right::after {
  border-right: 1px solid rgba(0, 0, 0, 0.1);
}

.solid-bottom::after {
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.solid-left::after {
  border-left: 1px solid rgba(0, 0, 0, 0.1);
}

/* -- 虚线 -- */
.dashed::after {
  border: 1px dashed #ddd;
}

.dashed-top::after {
  border-top: 1px dashed #ddd;
}

.dashed-right::after {
  border-right: 1px dashed #ddd;
}

.dashed-bottom::after {
  border-bottom: 1px dashed #ddd;
}

.dashed-left::after {
  border-left: 1px dashed #ddd;
}

/* -- 阴影 -- */
.shadow[class*='white'] {
  --ShadowSize: 0 1px 6px;
}

.shadow-lg {
  --ShadowSize: 0px 40px 100px 0px;
}

.shadow-warp {
  position: relative;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.shadow-warp:before,
.shadow-warp:after {
  position: absolute;
  content: "";
  top: 20px;
  bottom: 30px;
  left: 20px;
  width: 50%;
  box-shadow: 0 30px 20px rgba(0, 0, 0, 0.2);
  transform: rotate(-3deg);
  z-index: -1;
}

.shadow-warp:after {
  right: 20px;
  left: auto;
  transform: rotate(3deg);
}

.shadow-blur {
  position: relative;
}

.shadow-blur::before {
  content: "";
  display: block;
  background: inherit;
  -webkit-filter: blur(10px);
  filter: blur(10px);
  position: absolute;
  width: 100%;
  height: 100%;
  top: 10px;
  left: 10px;
  z-index: -1;
  opacity: 0.4;
  transform-origin: 0 0;
  border-radius: inherit;
  transform: scale(1, 1);
}

/* ==================
            背景
   ==================== */
.line-red::after,
.lines-red::after {
  border-color: #e54d42;
}

.line-orange::after,
.lines-orange::after {
  border-color: #f37b1d;
}

.line-yellow::after,
.lines-yellow::after {
  border-color: #fbbd08;
}

.line-olive::after,
.lines-olive::after {
  border-color: #8dc63f;
}

.line-green::after,
.lines-green::after {
  border-color: #39b54a;
}

.line-cyan::after,
.lines-cyan::after {
  border-color: #1cbbb4;
}

.line-blue::after,
.lines-blue::after {
  border-color: #0081ff;
}

.line-purple::after,
.lines-purple::after {
  border-color: #6739b6;
}

.line-mauve::after,
.lines-mauve::after {
  border-color: #9c26b0;
}

.line-pink::after,
.lines-pink::after {
  border-color: #e03997;
}

.line-brown::after,
.lines-brown::after {
  border-color: #a5673f;
}

.line-grey::after,
.lines-grey::after {
  border-color: #8799a3;
}

.line-gray::after,
.lines-gray::after {
  border-color: #aaaaaa;
}

.line-black::after,
.lines-black::after {
  border-color: #333333;
}

.line-white::after,
.lines-white::after {
  border-color: #ffffff;
}

.bg-red,
.b-red,
.bgc-red {
  background-color: #e54d42;
  color: #ffffff;
}

.bg-orange,
.b-orange,
.bgc-orange {
  background-color: #f37b1d;
  color: #ffffff;
}

.bg-yellow,
.b-yellow,
.bgc-yellow {
  background-color: #fbbd08;
  color: #333333;
}

.bg-olive,
.b-olive,
.bgc-olive {
  background-color: #8dc63f;
  color: #ffffff;
}

.bg-green,
.b-green,
.bgc-green {
  background-color: #39b54a;
  color: #ffffff;
}

.bg-cyan,
.b-cyan,
.bgc-cyan {
  background-color: #1cbbb4;
  color: #ffffff;
}

.bg-blue,
.b-blue,
.bgc-blue {
  background-color: #0081ff;
  color: #ffffff;
}

.bg-purple,
.b-purple,
.bgc-purple {
  background-color: #6739b6;
  color: #ffffff;
}

.bg-mauve,
.b-mauve,
.bgc-mauve {
  background-color: #9c26b0;
  color: #ffffff;
}

.bg-pink,
.b-pink,
.bgc-pink {
  background-color: #e03997;
  color: #ffffff;
}

.bg-brown,
.b-brown,
.bgc-brown {
  background-color: #a5673f;
  color: #ffffff;
}

.bg-grey,
.b-grey,
.bgc-grey {
  background-color: #8799a3;
  color: #ffffff;
}

.bg-gray,
.b-gray,
.bgc-gray {
  background-color: #f0f0f0;
  color: #333333;
}

.bg-black,
.b-black,
.bgc-black {
  background-color: #333333;
  color: #ffffff;
}

.bg-white,
.b-white,
.bgc-white {
  background-color: #ffffff;
  color: #666666;
}

/* ==================
            文本
   ==================== */
.fz-0,
.fs-0,
.f-s-0,
.fz0,
.fs0 {
  font-size: 0;
}

// 12px  辅助提示文字
.fz-12,
.fs-12,
.f-s-12,
.fz12,
.fs12 {
  font-size: 12px;
}

// 14px  正文、内容、输入框、按钮
.fz-14,
.fs-14,
.f-s-14,
.fz14,
.fs14 {
  font-size: 14px;
}

// 16px  模块标题、弹窗提示
.fz-16,
.fs-16,
.f-s-16,
.fz16,
.fs16 {
  font-size: 16px;
}

.fz-18,
.fs-18,
.f-s-18,
.fz18,
.fs18 {
  font-size: 18px;
}

.fz-20,
.fs-20,
.f-s-20,
.fz20,
.fs20 {
  font-size: 20px;
}

.fz-24,
.fs-24,
.f-s-24,
.fz24,
.fs24 {
  font-size: 24px;
}

.fz-26,
.fs-26,
.f-s-26,
.fz26,
.fs26 {
  font-size: 26px;
}

.fz-28,
.fs-28,
.f-s-28,
.fz28,
.fs28 {
  font-size: 28px;
}

.fz-32,
.fs-32,
.f-s-32,
.fz32,
.fs32 {
  font-size: 32px;
}

.fz-40,
.fs-40,
.f-s-40,
.fz40,
.fs40 {
  font-size: 40px;
}

.tAbc,
.t-t-c {
  text-transform: Capitalize;
}

.tABC,
.t-t-u {
  text-transform: Uppercase;
}

.tabc,
.t-t-l {
  text-transform: Lowercase;
}

// .tprice::before, .t-price {
//   content: "¥";
//   font-size: 80%;
//   margin-right: 4px;
// }

.cut,
.tcut,
.t-cut,
.text-cut {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.wn,
.w-s-n-w,
.wsnw,
.wsn,
.w-s-n {
  white-space: nowrap;
}

.white-pre-wrap {
  white-space: pre-wrap;
}

.white-pre-line {
  white-space: pre-line;
}

.fw500 {
  font-weight: 500;
}

.fw600 {
  font-weight: 600;
}

.fwl,
.f-w-l {
  font-weight: lighter;
}

.fwb,
.f-w-b {
  font-weight: bold;
}

.tc,
.tac,
.t-a-c {
  text-align: center;
}

.tl,
.tal,
.t-a-l {
  text-align: left;
}

.tr,
.tar,
.t-a-r {
  text-align: right;
}

.red,
.text-red,
.line-red,
.lines-red {
  color: #e54d42;
}

.orange,
.text-orange,
.line-orange,
.lines-orange {
  color: #f37b1d;
}

.yellow,
.text-yellow,
.line-yellow,
.lines-yellow {
  color: #fbbd08;
}

.olive,
.text-olive,
.line-olive,
.lines-olive {
  color: #8dc63f;
}

.green,
.text-green,
.line-green,
.lines-green {
  color: #39b54a;
}

.cyan,
.text-cyan,
.line-cyan,
.lines-cyan {
  color: #1cbbb4;
}

.blue,
.text-blue,
.line-blue,
.lines-blue {
  color: #0081ff;
}

.purple,
.text-purple,
.line-purple,
.lines-purple {
  color: #6739b6;
}

.mauve,
.text-mauve,
.line-mauve,
.lines-mauve {
  color: #9c26b0;
}

.pink,
.text-pink,
.line-pink,
.lines-pink {
  color: #e03997;
}

.brown,
.text-brown,
.line-brown,
.lines-brown {
  color: #a5673f;
}

.grey,
.text-grey,
.line-grey,
.lines-grey {
  color: #8799a3;
}

.gray,
.text-gray,
.line-gray,
.lines-gray {
  color: #aaaaaa;
}

.black,
.text-black,
.line-black,
.lines-black {
  color: #333333;
}

.white,
.text-white,
.line-white,
.lines-white {
  color: #ffffff;
}

/* ==================
            交互
   ==================== */
.cd,
.cud,
.csd,
.cursor-default,
.c-d {
  cursor: default;
}

.cp,
.cup,
.csp,
.cursor-pointer,
.c-p {
  cursor: pointer;
}

.cm,
.cum,
.csm,
.cursor-move,
.c-m {
  cursor: move;
}

.ct,
.cut,
.cst,
.cursor-text,
.c-t {
  cursor: text;
}

.usn,
.u-s-n {
  /*系统默认菜单被禁用*/
  -webkit-touch-callout: none;
  /*webkit浏览器*/
  -webkit-user-select: none;
  /*早期浏览器*/
  -khtml-user-select: none;
  /*火狐*/
  -moz-user-select: none;
  /*IE10*/
  -ms-user-select: none;
  user-select: none;

  input {
    /*webkit浏览器*/
    -webkit-user-select: auto;
  }

  textarea {
    -webkit-user-select: auto;
    /*webkit浏览器*/
  }
}

input.usn,
input.u-s-n,
textarea.usn,
textarea.u-s-n {
  /*webkit浏览器*/
  -webkit-user-select: auto;
}

/* ==================
            基线对齐
   ==================== */
.vam,
.v-a-m {
  vertical-align: middle;
}

.vat,
.v-a-t {
  vertical-align: top;
}